<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">

    <meta content="telephone=yes,email=yes" name="format-detection">
    <!--//自动识别电话号码和邮箱-->

    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--//苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <!--//苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--//苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="apple-touch-icon" href="images/HTML5_Badge_64.png"/>
    <!--//苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入-->
    <title>有收入</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!--初始化样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--共用样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--整个网站的局部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--适配样式-->
    <link rel="stylesheet" href="css/styleMedia.css">

</head>

<body style="background-color: #f4f9fd;">

<!--header begin-->
<header>
    <div id="flexHeader">
        <div class="div1"><a href="makeMoney_new.html"><img src="images/icon_arrow_left.png"></a> </div>
        <div class="div2">淘宝账号设置</div>
        <div id="save" class="div3 preservation">保存</div>
    </div>
</header>
<!--header end-->
<form id="condition-form" action="">
<!--Account selection begin-->
<article class="height-padding account-selection">
    <!--<div class="taoBao-selection">
        淘宝账号接单账号选择(必选)
    </div>-->
    <div class="taoBao">
        <!--<img src="images/img_taobao.png">-->
        <input type="hidden" name="id">
        <input type="hidden" name="tbAccount" value="淘宝名称"><p></p>
    </div>
</article>
<!--Account selection end-->

<!--Task attribute begin-->
<article class="account-selection">
    <div class="taoBao-selection">
        选择任务属性
    </div>
    <div class="selection-radio">
        <div>
            <input type="radio" name="hpType" checked="checked" value="-1">
            <span>全部</span>
        </div>
        <div>
            <input type="radio" name="hpType" value="1">
            <span>普通任务</span>
        </div>
        <div>
            <input type="radio" name="hpType" value="2">
            <span>特殊任务</span>
        </div>
    </div>
</article>
<!--Task attribute end-->


<!--Operating equipment begin-->
<article class="account-selection">
    <div class="taoBao-selection">
        选择操作设备
    </div>
    <div class="selection-radio">
        <div>
            <input type="radio" name="deviceType" checked="checked" value="-1">
            <span>全部</span>
        </div>
        <div>
            <input type="radio" name="deviceType" value="0">
            <span>手机&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
        <div>
            <input type="radio" name="deviceType" value="1">
            <span>电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
    </div>
</article>
<!--Operating equipment end-->


<!--Task platform begin-->
<article class="account-selection">
    <div class="taoBao-selection">
        选择任务平台
    </div>
    <div class="selection-radio">
        <div>
            <input type="radio" name="platformType" checked="checked" value="-1">
            <span>全部</span>
        </div>
        <div>
            <input type="radio" name="platformType" value="0">
            <span>淘宝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
        <div>
            <input type="radio" name="platformType" value="1">
            <span>天猫&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
    </div>
</article>
<!--Task platform end-->

<!--Task type begin-->
<article class="account-selection">
    <div class="taoBao-selection">
        选择任务类型
    </div>
    <div class="selection-radio">
        <div>
            <input type="radio" name="orderType" checked="checked" value="-1">
            <span>全部</span>
        </div>
        <div>
            <input type="radio" name="orderType" value="0">
            <span>垫付任务</span>
        </div>
        <div>
            <input type="radio" name="orderType" value="1">
            <span>浏览任务</span>
        </div>
    </div>
</article>
<!--Task type end-->

<!--Amount of money begin-->
<article class="account-selection">
    <div class="taoBao-selection">
        选择垫付最大金额：<span id="maxprice">0</span>
    </div>
    <div class="slider-wrapper" id="test">
        <!--<input id="range" type="range" min="0" max="20000" step="500" value="10" onchange="value_change()">-->
        <input id="range" type="range" name="amountLimit" max="20000" step="500" value="10"  onchange="value_change()">
    </div>
</article>
<!--Amount of money end-->


<!--Refunds begin-->
<article class="account-selection">
    <div class="taoBao-selection">
        选择返款方式
    </div>
    <div class="selection-radio">
        <div>
            <input type="radio" name="refundType" checked="checked" value="-1">
            <span>全部</span>
        </div>
        <div>
            <input type="radio" name="refundType" value="0">
            <span>平台返款</span>
        </div>
        <div>
            <input type="radio" name="refundType" value="1">
            <span>商家返款</span>
        </div>
    </div>
</article>
<!--Refunds end-->
</form>
<!--js-->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/common.js"></script>
<script src="js/config.js"></script>
<script src="js/vconsole.min.js"></script>
<script>
    var vConsole = new VConsole();
</script>
<!--<script src="js/vconsole.min.js"></script>-->
<!--<script>-->
    <!--var vConsole = new VConsole();-->
    <!--console.log('hello');-->
<!--</script>-->

<!--金额-->
<script>
	var userId
	$(function(){
		userId = JSON.parse(localStorage.getItem('user')).id
		$.ajax({
			type: "get",
			url: $CONFIG.baseUrl + "/api/order/taobao/setting/" + userId,
			beforeSend:function(x){
				x.setRequestHeader("Authorization", localStorage.getItem('token'));
			},
			success: function(data){
				console.log(JSON.stringify(data))
				fillFormData("#condition-form", data.data)
				$('#maxprice')[0].textContent = data.data.amountLimit * 500
			},
			error: function(error){
				plus.nativeUI.toast('操作异常')
			}
		});
	})
	        
	function fillFormData(form, obj) {
		obj.amountLimit = obj.amountLimit / 500
		var formEL = $(form)
		$.each(obj, function(index, item) {
			type = formEL.find("[name=" + index + "]").attr('type')
			switch (type) 
			{
				case "hidden": 
				case "text": 
				case "range": 
					formEL.find("[name=" + index + "]").val(item)
					break
				case "radio": 
					formEL.find("[name=" + index + "]").each(function(){
						$(this).attr('checked', $(this).val() == item)
					})
					break
				case "checkbox": 
					formEL.find("[name=" + index + "]").attr('checked',$(this).val()==value)
					break
			}
		});
	}
</script>
<script>
    function value_change() {
        var number = document.getElementById("range").value;
        document.getElementById("maxprice").textContent = number*500;
    }
        
    $('#save').click(function() {
    	console.log("保存淘宝任务账号设置")
		var form = document.getElementById("condition-form");
		var formdata = new FormData(form);
		formdata.append("appUserId", userId);
		formdata.set("amountLimit", formdata.get('amountLimit') * 500);
		$.ajax({
			url: $CONFIG.baseUrl + "/api/order/taobao/setting",
			type: 'put',
			data: formdata,
			contentType:false,
			processData:false,
			beforeSend:function(x){
				x.setRequestHeader("Authorization", localStorage.getItem('token'));
			},
			success: function(data){
				plus.nativeUI.toast(data.msg)
			},
			error: function(error){
				plus.nativeUI.toast('操作异常')
			}
		})
    })

</script>

<script>
    $.fn.RangeSlider = function (cfg) {
        this.sliderCfg = {
            min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
            max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
            step: cfg && Number(cfg.step) ? cfg.step : 1,
            callback: cfg && cfg.callback ? cfg.callback : null
        };

        var $input = $(this);
        var min = this.sliderCfg.min;
        var max = this.sliderCfg.max;
        var step = this.sliderCfg.step;
        var callback = this.sliderCfg.callback;

        $input.attr('min', min)
            .attr('max', max)
            .attr('step', step);

        $input.bind("input", function (e) {
            $input.attr('value', this.value);
            $input.css( 'background', 'linear-gradient(to right, #059CFA, white ' + this.value + '%, white)' );            
            if ($.isFunction(callback)) {
                callback(this);
            }
        });
    };

    var change = function($input) {
        /*内容可自行定义*/

    }

    $('input#range').RangeSlider({
        min: 0,
        max: 100,
        step: 1,
        callback: change
    })


</script>

</body>
</html>